<template>
  <div :class="className" :style="{height:height,width:width}" />
</template>

<script>
import echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import resize from './mixins/resize'
import {
  getSumStudyNum,
  getSumDayStudyNum,
} from "@/api/system/college";
import { getToken } from "@/utils/auth";

export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '350px'
    },
    autoResize: {
      type: Boolean,
      default: true
    },
    chartData: {
      type: Object,
      required: true
    },
   
  },
  data() {
    return {
      chart: null,
      sumCount:0,
      courseNameList:[],
      courseCountList:[]
    }
  },
  created() {
    getSumStudyNum().then((response) => {
      console.log(response.data.sumCount);
        this.sumCount = response.data.sumCount;
        this.courseNameList = response.data.courseNameList;
        this.courseCountList = response.data.courseCountList;
        this.initChart();
      });
  },

  methods: {
    initChart() {
      this.chart = echarts.init(this.$el, 'macarons')
      this.setOptions(this.chartData)
    },
    setOptions({ expectedData, actualData } = {}) {
      this.chart.setOption({
        title : {
            show:true, //显示策略，默认值true,可选为：true（显示） | false（隐藏）
            text: '课程累计学习次数:'+this.sumCount, //主标题文本，'\n'指定换行
            x:'center', //水平安放位置，默认为'left'，可选为：'center' | 'left' | 'right' | {number}（x坐标，单位px）
            y: 'top', //垂直安放位置，默认为top，可选为：'top' | 'bottom' | 'center' | {number}（y坐标，单位px）
            textAlign: 'left' ,//水平对齐方式，默认根据x设置自动调整，可选为： left' | 'right' | 'center
            backgroundColor: 'rgba(0,0,0,0)', //标题背景颜色，默认'rgba(0,0,0,0)'透明
            borderColor: '#ccc', //标题边框颜色,默认'#ccc'
            textStyle: { //主标题文本样式{"fontSize": 18,"fontWeight": "bolder","color": "#333"}
                fontFamily: 'lighter',
                fontSize: 24,
                fontStyle: 'normal',
                fontWeight: 'normal',
            }
        },
        tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'shadow'
        }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: {
            type: 'value',
            boundaryGap: [0, 0.01]
        },
        yAxis: {
            type: 'category',
            data: this.courseNameList
        },
        series: [
            {
                name: '总数量',
                type: 'bar',
                data: this.courseCountList
            },
        
        ]
      })
    }
  }
}
</script>
